<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>移动div</title>
	<style type="text/css">
	*{padding:0px; margin:0px;}
	#one{width:100px; height:100px;background :pink;
		position:absolute;
		}
	</style>
</head>
<body>
	<div id ='one'></div>
	<script type="text/javascript">
	//获取元素

	var move =document.getElementById('one');
	//声明全局变量
	var x =0;
	var y =0;
	var l =0;
	var t  =0;

	//设置变量
	var isDown = false; 

	//绑定鼠标按下的事件
	move.onmousedowm =function(e)
	{
		//获取x y 的坐标
			 x = e.clientX;
			 y =e.clientY;
		//获取元素的左偏易量 和顶部偏移量
			l =move.offsetLeft;
			t= move.offsetTop;

		//打开
		isDown =true;
	
		//设置样式
		move.style.cursor ='move';

	}
	//绑定鼠标移动的事件

	window.onmousemove = function(e)
	{
		if(isDown ==false){
			return;
		}
	
	//获取x与y 的坐标

	var nx = e.clientX;
	var ny = e.clientY;

	//重新计算左偏量和顶部偏移量

	var nl = nx - (x-l);
	var nt = ny -(y-l);

	// 设置
	move.style.left = nl +'px';
	move.style.top = nt+'px';

	}
	//鼠标抬起的事件
	move.onmouseup =function()
	{
		//关闭
		isDown =false;
		move.style.cursor= 'default';
	}


	</script>
</body>
</html>